<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/images/home-img-1.png"
    type="./assets/./assets/imagess/x-icon">
  <link rel="stylesheet" href="//unpkg.com/swiper@7/swiper-bundle.min.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="./assets/css/styles.css">
  <title>咖啡网站</title>
</head>

<body>
  <!-- 头部区 -->
  <header class="header">
    <div id="menu-btn" class="fas fa-bars"></div>
    <a href="#" class="logo">coffee <i class="fas fa-mug-hot"></i></a>
    <nav class="navbar">
      <a href="#home">home</a>
      <a href="#about">about</a>
      <a href="#menu">menu</a>
      <a href="#review">review</a>
      <a href="#book">book</a>
    </nav>
    <a href="#" class="btn">book a table</a>
  </header>

  <!-- home start -->
  <section class="home" id="home">
    <div class="row">
      <div class="content">
        <h3>fresh coffee in the morning</h3>
        <a href="#" class="btn">buy one now</a>
      </div>

      <div class="image">
        <img src="./assets/images/home-img-1.png" class="main-home-images" alt="">
      </div>
    </div>

    <div class="image-slider">
      <img src="./assets/images/home-img-1.png" alt="">
      <img src="./assets/images/home-img-2.png" alt="">
      <img src="./assets/images/home-img-3.png" alt="">
    </div>
  </section>
  <!-- home end -->

  <!-- about start -->
  <section class="about" id="about">
    <h1 class="heading">about us <span>why choose us</span></h1>

    <div class="row">
      <div class="image">
        <img src="./assets/images/about-img.png" alt="">
      </div>

      <div class="content">
        <h3 class="title">what's make our coffee special!</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel rerum laboriosam reprehenderit ipsa id
          repellat odio illum, voluptas, necessitatibus assumenda adipisci. Hic, maiores iste? Excepturi illo
          dolore mollitia qui quia.</p>
        <a href="#" class="btn">read more</a>
        <div class="icons-container">
          <div class="icons">
            <img src="./assets/images/about-icon-1.png" alt="">
            <h3>quality coffee</h3>
          </div>
          <div class="icons">
            <img src="./assets/images/about-icon-2.png" alt="">
            <h3>our branches</h3>
          </div>
          <div class="icons">
            <img src="./assets/images/about-icon-3.png" alt="">
            <h3>free delivery</h3>
          </div>
        </div>
      </div>
    </div>
  </section>


  <!-- menu start -->
  <section class="menu" id="menu">
    <h1 class="heading">our menu <span>popular menu</span></h1>

    <div class="box-container">
      <a href="#" class="box">
        <img src="./assets/images/menu-1.png" alt="">
        <div class="content">
          <h3>our special coffee</h3>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, sed.</p>
          <span>$8.99</span>
        </div>
      </a>

      <a href="#" class="box">
        <img src="./assets/images/menu-2.png" alt="">
        <div class="content">
          <h3>our special coffee</h3>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, fugit.</p>
          <span>$8.99</span>
        </div>
      </a>

      <a href="#" class="box">
        <img src="./assets/images/menu-3.png" alt="">
        <div class="content">
          <h3>our special coffee</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, recusandae.</p>
          <span>$8.99</span>
        </div>
      </a>

      <a href="#" class="box">
        <img src="./assets/images/menu-4.png" alt="">
        <div class="content">
          <h3>our special coffee</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quas.</p>
          <span>$8.99</span>
        </div>
      </a>

      <a href="#" class="box">
        <img src="./assets/images/menu-5.png" alt="">
        <div class="content">
          <h3>our special coffee</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, vitae.</p>
          <span>$8.99</span>
        </div>
      </a>

      <a href="#" class="box">
        <img src="./assets/images/menu-6.png" alt="">
        <div class="content">
          <h3>our special coffee</h3>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, expedita!</p>
          <span>$8.99</span>
        </div>
      </a>
    </div>
  </section>
  <!-- menu end -->

  <!-- review start -->
  <section class="review" id="review">
    <h1 class="heading">reviews <span>what people says</span></h1>

    <div class="swiper review-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide box">
          <i class="fas fa-quote-left"></i>
          <i class="fas fa-quote-right"></i>
          <img src="./assets/images/pic-1.png" alt="">
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, earum quis dolorem quaerat tenetur
            illum.</p>
          <h3>john deo</h3>
          <span>satisfied client</span>
        </div>

        <div class="swiper-slide box">
          <i class="fas fa-quote-left"></i>
          <i class="fas fa-quote-right"></i>
          <img src="./assets/images/pic-2.png" alt="">
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum optio quasi ut, illo ipsam
            assumenda.</p>
          <h3>john deo</h3>
          <span>satisfied client</span>
        </div>

        <div class="swiper-slide box">
          <i class="fas fa-quote-left"></i>
          <i class="fas fa-quote-right"></i>
          <img src="./assets/images/pic-3.png" alt="">
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius asperiores aliquam hic quis!
            Eligendi, aliquam.</p>
          <h3>john deo</h3>
          <span>satisfied client</span>
        </div>

        <div class="swiper-slide box">
          <i class="fas fa-quote-left"></i>
          <i class="fas fa-quote-right"></i>
          <img src="./assets/images/pic-4.png" alt="">
          <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi modi perspiciatis distinctio
            velit aliquid a.</p>
          <h3>john deo</h3>
          <span>satisfied client</span>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </section>
  <!-- review end -->

  <!-- book start -->
  <section class="book" id="book">
    <h1 class="heading">booking <span>reserve a table</span></h1>

    <form action="">
      <input type="text" placeholder="Name" class="box">
      <input type="email" placeholder="Email" class="box">
      <input type="number" placeholder="Number" class="box">
      <textarea name="" placeholder="Message" class="box" id="" cols="30" rows="10"></textarea>
      <input type="submit" value="send message" class="btn">
    </form>
  </section>
  <!-- book end -->


  <!-- footer start -->
  <section class="footer">
    <div class="box-container">
      <div class="box">
        <h3>our branches</h3>
        <a href="#"><i class="fas fa-arrow-right"></i> india</a>
        <a href="#"><i class="fas fa-arrow-right"></i> USA</a>
        <a href="#"><i class="fas fa-arrow-right"></i> france</a>
        <a href="#"><i class="fas fa-arrow-right"></i> africa</a>
        <a href="#"><i class="fas fa-arrow-right"></i> japan</a>
      </div>

      <div class="box">
        <h3>quick links</h3>
        <a href="#home"><i class="fas fa-arrow-right"></i> home</a>
        <a href="#about"><i class="fas fa-arrow-right"></i> about</a>
        <a href="#menu"><i class="fas fa-arrow-right"></i> menu</a>
        <a href="#review"><i class="fas fa-arrow-right"></i> review</a>
        <a href="#book"><i class="fas fa-arrow-right"></i> book</a>
      </div>

      <div class="box">
        <h3>contact info</h3>
        <a href="#"><i class="fas fa-phone"></i> +123-456-7890</a>
        <a href="#"><i class="fas fa-phone"></i> +111-222-3333</a>
        <a href="#"><i class="fas fa-envelope"></i> coffee@gmail.com</a>
        <a href="#"><i class="fas fa-envelope"></i> Perú, Lima</a>
      </div>

      <div class="box">
        <h3>contact info</h3>
        <a href="#"><i class="fab fa-facebook-f"></i> facebook</a>
        <a href="#"><i class="fab fa-twitter"></i> twitter</a>
        <a href="#"><i class="fab fa-instagram"></i> instagram</a>
        <a href="#"><i class="fab fa-linkedin"></i> linkedin</a>
        <a href="#"><i class="fab fa-twitter"></i> twitter</a>
      </div>
    </div>

    <div class="credit">created by <span>Jetwang</span> | all rights reserved</div>
  </section>
  <!-- footer end -->

  <!-- SWIPER -->
  <script src="//unpkg.com/swiper@7/swiper-bundle.min.js"></script>

  <!-- Custom JS File Link  -->
  <script src="./assets/js/main.js"></script>
</body>

</html>